<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <base href="${ctx}/">
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <%--1 引入ztree提供的样式css和js文件--%>
    <link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>

    <%--
        ztree插件菜单的树的快速入门：
                     1 引入ztree提供的样式css和js文件
                    整个tree树都在标签<script></script>中实现
                        2 引入ztree插件的全局设置
                        3 设置ztree树的内容（json数据： id：当前节点的id  pId:当前节点的父id  name:当前节点的名称）
                        4 页面加载事件：获取页面上的标签 将ztree的全局设置和内容放入该标签内

    --%>


    <SCRIPT type="text/javascript">
           //2 引入ztree插件的全局设置
           var setting = {
               check: {
                   enable: true
               },
               data: {
                   simpleData: {
                       enable: true
                   }
               }
           };

           //3 假数据(可选)： 设置ztree树的内容（json数据： id：当前节点的id  pId:当前节点的父id  name:当前节点的名称）


           //4 页面加载事件：获取页面上的标签 将ztree的全局设置和内容放入该标签内
           let ztree;
           $(document).ready(function(){
               //ajax和后台交互 拿到返回的json数据 d= [{id:111, pId:11, name:"叶子节点111"},{ id:111, pId:11, name:"叶子节点111"}]
               $.get( "/system/role/initZtree.do?rid=${role.id}", function( d ) {
                   ztree=$.fn.zTree.init($("#treeDemo"), setting, d);
                   //展开所有节点的api
                   ztree.expandAll(true);
               });

           });


    </SCRIPT>
</head>

<body style="overflow: visible;">
<div id="frameContent" class="content-wrapper" style="margin-left:0px;height: 1200px" >
    <section class="content-header">
        <h1>
            菜单管理
            <small>菜单列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

        <!-- .box-body -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">角色 [${role.name}] 权限列表</h3>
            </div>

            <div class="box-body">

                <!-- 数据表格 -->
                <div class="table-box">
                    <!--工具栏-->
                    <div class="box-tools text-left">
                        <button type="button" class="btn bg-maroon" onclick="submitCheckedNodes();">保存</button>
                        <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                    </div>
                    <!--工具栏/-->
                    <script>
                        function submitCheckedNodes(){
                            // 将表单中的roleid moduleIds进行赋值
                                    //获取到所有选中的权限id
                            let arr=ztree.getCheckedNodes(true);
                            let str="";
                            if(arr!=null){
                                for(let i=0;i<arr.length;i++){
                                    str+=arr[i].id+",";
                                }
                                //abcdefg,
                                str=str.substring(0,str.length-1);
                            }


                            $("#moduleIds").val(str);
                            // 让整个表单提交
                            $("#formId").submit();
                        }
                    </script>
                    <!-- 树菜单 -->
                    <form id="formId" name="icform" method="post" action="/system/role/updateRoleModule.do">
                        <input type="hidden" name="roleid" value="${role.id}"/>
                        <input type="hidden" id="moduleIds" name="moduleIds" value=""/>
                        <div class="content_wrap">
                            <div class="zTreeDemoBackground left" style="overflow: visible">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </form>
                    <!-- 树菜单 /-->

                </div>
                <!-- /数据表格 -->

            </div>
            <!-- /.box-body -->
        </div>
    </section>
</div>
</body>
</html>